import React from 'react'
import { useRoutes, Link, useNavigate } from 'react-router-dom'
import routers from './routers'
import { Suspense } from 'react'
import { Button, Space } from 'antd'

function App() {
  // 使用 useRoutes 获取路由组件
  const element = useRoutes(routers)
  const navigate = useNavigate()
  const handleClick = () => {
    // 使用 navigate 函数进行页面跳转
    navigate('todlList');
  };

  return (
    <div className='App'>
      {/* 路由链接 */}
      <Space wrap>
        <Button type='primary'>
          <Link to='home'>home页面</Link>
        </Button>
        <Button type='primary'>
          <Link to='about'>about页面</Link>
        </Button>
        <Button
          type='primary'
          onClick={handleClick}
        >
          todlList页面
        </Button>
      </Space>
      {/* 路由组件展示位置，fallback 加载时 */}
      <Suspense fallback={<div>loading...</div>}>{element}</Suspense>
    </div>
  )
}
export default App
